import { Suspense } from 'react'
import { RouterProvider } from 'react-router-dom'
import { QueryClient, QueryClientProvider } from 'react-query'
import { MantineProvider, createTheme } from '@mantine/core'
import { router } from './router'

import LoadingPage from './pages/loading'

import '@mantine/core/styles.css'
import './App.css'
import { createThemeColors } from './theme'
import Toast from './components/Toast'

const customThemeColor = createThemeColors();

const queryClient = new QueryClient();

function App() {

  const theme = createTheme({
    colors: {
      "cu-primary": customThemeColor
    },
    fontFamily: 'Open Sans, sans-serif',
    primaryColor: 'cu-primary',
  })

  return (
    <MantineProvider theme={theme}>
      <QueryClientProvider client={queryClient}>
        <Suspense fallback={<LoadingPage />} >
          <RouterProvider router={router} />
        </Suspense>
      </QueryClientProvider>

      <Toast />
    </MantineProvider>
  )
}

export default App
